 *{
    margin:0;
    padding: 0; 
 }

 html,body{
 	width: 100%;
 	height: 100%;
 }

 .wrapper{
 	width: 300px;
 	height: 300px;
 	position: absolute;

    top: 0;
    left: 0;
    right:0;
    bottom: 0;
    margin:auto; 

 	/* top: 50%;
 	left: 50%; */

 	/* margin-left: -150px;
 	margin-top: -150px; */

 	/*transform: translate(-50%,-50%);*/

 }

 .wrapper > div{
    width: 100px;
    height: 100px;
    position: absolute;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
 }

 .wrapper .top{
    left: 100px;
    top: 0;
    background: #A7DAB0;
 }

  .wrapper .left{
    top: 100px;
    left: 0;
    background: #436348;
 }

  .wrapper .middle{
    top: 100px;
    left: 100px;
    background: #9477E8 url('../image/icon.png') no-repeat center;
    background-size:24px 24px; 
    border-radius: 50%;
 }

  .wrapper .right{
    top: 100px;
    right: 0;
    background: #DC52D7;
 }

  .wrapper .bottom{
    bottom: 0;
    left: 100px;
    background: #E2395F;
 }

